@extends("admin.layout.main")

@section("content")
    <style>
        .info ul{margin:0;}
        .info li{list-style: none;float: left;margin:0 5px 0 5px;}
        .icon_type{float: left;font-weight: bold;font-size: 18px}
    </style>
    <link rel="stylesheet" href="/plugins/jOrgChart/css/jquery.jOrgChart.css"/>
    <!--主页面头部信息-->
    <div class="page-header">
        <h1>
            接点关系图
        </h1>
    </div>
    <div class="page-header">
        <form method="get" action="">
            创客ID：
            <input type="text" name="keyword" id="keyword" value="{{ $user_id }}">
            <button class="btn btn-xs btn-primary" style="margin-top:-4px;">搜索</button>
        </form>
    </div>
    <!-- /.page-header -->
    <div class="row">
        <div class="col-xs-12">
            @if(!isset($data['data']))
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <ul id="org" style="display: none">
                <li>
                    <span class="icon_type">@if($data['children']) + @else - @endif</span><span class="user_id">{{ $data['id'] }}</span>{{'('.$data['name'].')' }}
                    <div style="border: 1px solid #0C0C0C;margin-top: 5px;margin-bottom: 5px"></div>
                    <div class="info">
                        <ul>
                            <li>
                                创业区<br>
                                {{ $data['entrepreneurship_achievement'] }}
                            </li>
                            <li>
                                创新区<br>
                                {{ $data['chuangheng_achievement'] }}
                            </li>
                            <li>
                                创客区<br>
                                {{ $data['director_achievement'] }}
                            </li>
                        </ul>
                        <div style="clear: both;"></div>
                        <div style="width: 100%;text-align: left;font-size: 12px">
                            注册时间：{{ $data['created_at'] }}<br>
                            复消日期：{{ $data['repeated_consumption_date'] }}<br>
                            所在区域：{{ $data['user_area'] }}
                        </div>
                    </div>
                    <ul>
                        @if($data['children'])
                            @foreach($data['children'] as $cv)
                                <li id="child_{{ $cv['id'] }}">
                                    <span class="icon_type">@if($cv['children']) + @else - @endif</span>
                                    <span class="user_id">{{ $cv['id'] }}</span>{{'('.$cv['name'].')' }}
                                    <div style="border: 1px solid #0C0C0C;margin-top: 5px;margin-bottom: 5px"></div>
                                    <div class="info">
                                        <ul style="display: block">
                                            <li>
                                                创业区<br>
                                                {{ $cv['entrepreneurship_achievement'] }}
                                            </li>
                                            <li>
                                                创新区<br>
                                                {{ $cv['chuangheng_achievement'] }}
                                            </li>
                                            <li>
                                                创客区<br>
                                                {{ $cv['director_achievement'] }}
                                            </li>
                                        </ul>
                                        <div style="clear: both"></div>
                                        <div style="width: 100%;text-align: left;font-size: 12px">
                                            注册时间：{{ $cv['created_at'] }}<br>
                                            复消日期：{{ $cv['repeated_consumption_date'] }}<br>
                                            所在区域：{{ $cv['user_area'] }}
                                        </div>
                                    </div>
                                    <ul class="childNode">

                                    </ul>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </li>
            </ul>

            <div id="chart" class="orgChart" style="overflow: scroll;"></div>
            @else
                帐号不存在！
            @endif
        </div>
    </div>
    <script type="text/javascript" src="/plugins/jOrgChart/js/prettify.js"></script>
    <script type="text/javascript" src="/plugins/jOrgChart/js/jquery.min.js"></script>
    <script type="text/javascript" src="/plugins/jOrgChart/js/jquery-ui.min.js"></script>
    <script src="/plugins/jOrgChart/js/jquery.jOrgChart.js"></script>
    <script>
        jQuery(document).ready(function() {
            $("#org").jOrgChart({
                chartElement : '#chart',
                dragAndDrop  : false,
                depth: 100
            });
        });

        function getChilrenNode(event,obj) {
            //console.log(event, obj);
            event.stopPropagation();
            var id = $(obj).find('.user_id').html();
            var csrf_token = $('input[name="_token"]').val();
            var data = {'id':id,'_token':csrf_token};
            var url = '{{ route('admin.member.ajaxGetContact') }}';
            $.ajax({
                type: 'post',
                url: url,
                data: data,
                dataType: "JSON",
                async: false,
                success: function (res) {
                    var parent_node = $('#child_'+res.id);
                    parent_node.find('.childNode').html('');
                    var str = '';
                    $.each(res.children,function (i,item) {
                        var icon = '-';
                        var created_time = '';
                        if(item.children > 0){
                            icon = '+'
                        }
                        if(item.created_at!=null){
                            created_time = item.created_at;
                        }
                        str += '<li id="child_'+item.id+'">';
                        str += '<span class="icon_type">'+icon+'</span>';
                        str += '<span class="user_id">'+item.id+'</span>('+item.name+')';
                        str += '<div style="border: 1px solid #0C0C0C;margin-top: 5px;margin-bottom: 5px"></div>';
                        str += '<div class="info"><ul><li>创业区<br>'+item.entrepreneurship_achievement+'</li>';
                        str += '<li>创新区<br>'+item.chuangheng_achievement+'</li>';
                        str += '<li>创客区<br>'+item.director_achievement+'</li></ul>';
                        str += '<div style="clear: both"></div><div style="width: 100%;text-align: left;font-size: 12px">注册时间：'+created_time+'<br>';
                        str += '复消日期：'+item.repeated_consumption_date+'<br>';
                        str += '所在区域：'+item.user_area+'</div></div><ul class="childNode"></ul></li>';
                    });
                    parent_node.find('.childNode').append(str);
                    $('#chart').empty();
                    $("#org").jOrgChart({
                        chartElement : '#chart',
                        dragAndDrop  : false
                    });
                },
                error: function (res) {
                    console.log(res, 'error');
                }
            });
        }
    </script>
@endsection
